<template>
    <div class="login">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" prop="account">
                <el-input
                    v-model="ruleForm.account"
                    placeholder="请输入用户名"
                ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input
                    v-model="ruleForm.password"
                    type="password"
                    placeholder="请输入密码"
                ></el-input>
            </el-form-item>

            <el-form-item label="身份">
                <el-select v-model="ruleForm.userType" placeholder="请选择身份">
                    <el-option label="学生" value="0"></el-option>
                    <el-option label="老师" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                >登录
                </el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                password: "",
                account: "",
                userType: "",
            },
            rules: {
                password: [
                    {
                        pattern: /^[a-zA-Z0-9_*]{6,50}$/,
                        message: "长度在 6 到 50 个字符",
                        trigger: "blur",
                    },
                ],
                account: [
                    {
                        pattern: /^[a-zA-Z][a-zA-Z0-9]{5,50}$/,
                        message: "必须以字母开头，不能有数字，字母之外的字符，且长度为6-50",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //请求
                    var datastr = JSON.stringify(this.ruleForm);
                    console.log(datastr);
                    this.$axios.post("/login", datastr, {
                        headers: {
                            "Content-Type": "application/json",
                        },
                    })
                        .then((resp) => {
                            const str = resp.data;
                            console.log(str);
                            if (str.status === "200") {
                                this.$message({
                                    message: '登录成功',
                                    type: 'success'
                                });
                                this.$router.replace("/index");
                                localStorage.setItem("userinfo", JSON.stringify(str.data));
                                this.$GLOBAL.userinfo = str.data;
                            } else {
                                this.$message.error('账号或密码错误');
                            }
                            this.$refs[formName].resetFields();
                        }).catch(res => {
                        console.log(res)
                        if (res.message === "Network Error" || res.code === "ERR_NETWORK") {
                            this.$message({
                                message: '网络超时',
                                type: 'error'
                            });
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted() {
        if (localStorage.getItem("userinfo") != null) {
            const data = JSON.parse(localStorage.getItem("userinfo")).userinfo;
            this.ruleForm.password = data.password;
            this.ruleForm.account = data.account;
            this.ruleForm.userType = data.duration;
        }
    },
};
</script>

<style scoped>
</style>
